<template>
  <div>
    <a-row type="flex" justify="center" align="top">
      <a-col :span="6">
        <a-card :bordered="false">
          <img slot="cover" :src="'http://127.0.0.1:8081/images/' + mid + '/poster.jpg'" />
        </a-card>
      </a-col>
      <a-col :span="18">
        <a-card :bordered="false">
          <a-card-meta :title="movie.name">
            <template slot="description">
              <p>语言：{{ movie.language }} / {{ movie.shoot }}</p>
              <p>描述: {{ movie.descri }}</p>
              <p>导演：{{ movie.directors }}</p>
              <p>出演: {{ movie.actors }}</p>
              <p>标签: {{ movie.genres }}</p>
              <p>描述: {{ movie.descri }}</p>
              <p>时长：{{ movie.timelong }}</p>
              <p>评分：{{ movie.score + 5 }}</p>
            </template>
          </a-card-meta>
          <div class="cardItemContent">
            <span>{{ movie.issue | fromNow }}</span>
            <a-rate style="float: right;" :value="score" allow-half />
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row style="margin-top: 30px;">
      <h1 style="font-size: 2rem;" id="month">
        <a-icon type="trophy" id="RY" />&emsp;协同过滤【电影相似性】
      </h1>
    </a-row>
    <a-spin size="large" :spinning="loading">
      <div class="ant-pro-pages-list-projects-cardList">
        <a-list
          :loading="loading"
          :data-source="RecData"
          :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }"
        >
          <a-list-item slot="renderItem" slot-scope="item">
            <a-card class="ant-pro-pages-list-projects-card" hoverable>
              <img
                slot="cover"
                :src="'http://127.0.0.1:8081/images/' + item.mid + '/picture.jpg'"
                :alt="item.name"
              />
              <a-card-meta :title="item.name">
                <template slot="description">
                  <p>语言：{{ item.language }} / {{ item.shoot }}</p>
                  <p>导演：{{ item.directors }}</p>
                  <p>时长：{{ item.timelong }}</p>
                  <p>评分：{{ item.score + 5 }}</p>
                </template>
              </a-card-meta>
              <div class="cardItemContent">
                <span>{{ item.issue | fromNow }}</span>
              </div>
            </a-card>
          </a-list-item>
        </a-list>
      </div>
    </a-spin>

    <!-- 内容相似性 -->
    <a-row style="margin-top: 30px;">
      <h1 style="font-size: 2rem;" id="month">
        <a-icon type="trophy" id="RY" />&emsp;内容相似性推荐
      </h1>
    </a-row>
    <a-spin size="large" :spinning="loading">
      <div class="ant-pro-pages-list-projects-cardList">
        <a-list
          :loading="loading"
          :data-source="RecBCData"
          :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }"
        >
          <a-list-item slot="renderItem" slot-scope="item">
            <a-card class="ant-pro-pages-list-projects-card" hoverable>
              <img
                slot="cover"
                :src="'http://127.0.0.1:8081/images/' + item.mid + '/picture.jpg'"
                :alt="item.name"
              />
              <a-card-meta :title="item.name">
                <template slot="description">
                  <p>语言：{{ item.language }} / {{ item.shoot }}</p>
                  <p>导演：{{ item.directors }}</p>
                  <p>时长：{{ item.timelong }}</p>
                  <p>评分：{{ item.score + 5 }}</p>
                </template>
              </a-card-meta>
              <div class="cardItemContent">
                <span>{{ item.issue | fromNow }}</span>
              </div>
            </a-card>
          </a-list-item>
        </a-list>
      </div>
    </a-spin>
  </div>
</template>

<script>
import moment from "moment";
import {
  getMovieInfo,
  getMovieInfoRec,
  getMovieInfoRecBC,
} from "@/api/MovieRest";
// import { AvatarList } from "@/components";
export default {
  // components: { AvatarList },
  data() {
    return {
      mid: 0,
      movie: {},
      score: 0,
      RecData: [],
      RecBCData: [],
      form: this.$form.createForm(this),
      loading: false,
    };
  },
  filters: {
    fromNow(date) {
      return moment(date).fromNow();
    },
  },
  created() {
    this.mid = this.$route.params.mid;

    getMovieInfo(this.mid).then((res) => {
      this.loading = false;
      console.log(res);
      this.score = Math.floor(res.score);
      console.log(this.score);
      this.movie = res;
    });

    getMovieInfoRec(this.mid, { num: 4 }).then((res) => {
      console.log(res);
      this.RecData = res;
    });

    getMovieInfoRecBC(this.mid, { num: 4 }).then((res) => {
      console.log(res);
      this.RecBCData = res;
    });
  },
  mounted() {
    // this.getList();
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.ant-pro-components-tag-select {
  margin-top: 30px;
  /deep/ .ant-pro-tag-select .ant-tag {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}
// .ant-pro-pages-list-projects-cardList {
//   margin-top: 12px;
//   /deep/ .ant-card-meta-title {
//     margin-bottom: 4px;
//   }
//   /deep/ .ant-card-meta-description {
//     height: 44px;
//     overflow: hidden;
//     line-height: 22px;
//   }
//   .cardItemContent {
//     display: flex;
//     // height: 20px;
//     margin-top: 16px;
//     margin-bottom: -4px;
//     line-height: 20px;
//     > span {
//       flex: 1 1;
//       color: rgba(0, 0, 0, 0.45);
//       font-size: 12px;
//     }
//     /deep/ .ant-pro-avatar-list {
//       flex: 0 1 auto;
//     }
//   }
// }

#RY {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: 1s;
  -webkit-animation: rotate 2s linear infinite;
  -moz-animation: rotate 2s linear infinite;
  -o-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}
@-moz-keyframes rotate {
  from {
    -moz-transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(359deg);
  }
}
@-o-keyframes rotate {
  from {
    -o-transform: rotateY(0deg);
  }
  to {
    -o-transform: rotateY(359deg);
  }
}
@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(359deg);
  }
}

/* .article-list {
  position: relative;
  width: 1100px;
  border: 1px red solid;
  color: black;
} */
</style>
